<template>
  <div
    class="bg-[url('assets/background.jpg')] bg-center bg-cover h-screen overflow-hidden"
    v-if="data"
  >
    <div
      class="bg-[url(assets/header.png)] bg-center bg-cover flex justify-center animate__animated animate__bounceInDown"
      style="height: 80px; width: 100%"
    >
      <div class="text-4xl mt-3 text-cyan-300 font-mono my-title" style="">
        数据大屏可视化
      </div>
    </div>
    <div class="relative cursor-pointer">
      <span class="absolute right-6 text-white" @click="toggle">放大</span>
    </div>
    <div class="flex text-white p-3" style="height: calc(100vh - 80px)">
      <div class="flex-1 p-3 flex flex-col">
        <!-- 横向柱状图 -->
        <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData" />
        <!-- 雷达图 -->
        <RadarBar class="h-1/3 box-border pb-4" :data="data.riskData" />
        <!-- 关系图 -->
        <RelationBar class="h-1/3 box-border pb-4" :data="data.relationData" />
      </div>
      <div class="w-1/2 flex flex-col mx-5">
        <!-- 数据总览图 -->
        <TotalData
          class="bg-slate-800 bg-opacity-50 p-3"
          :data="data.totalData"
        />
        <!-- 地图 -->
        <MapChart
          class="bg-slate-800 bg-opacity-50 flex-1 p-3 mt-2"
          :data="data.mapData"
        />
      </div>
      <div class="flex-1 p-3 flex flex-col">
        <!-- 竖向柱状图 -->
        <Vertical class="h-1/3 box-border pb-4" :data="data.serverData" />
        <!-- 环形图 -->
        <RingBar class="h-1/3 box-border pb-4" :data="data.abnormalData" />
        <!-- 数据云图11 -->
        <WorldCloud class="h-1/3 box-border pb-4" :data="data.wordCloudData" />
      </div>
    </div>
  </div>
</template>

<script setup>
import HorizontalBar from '@/components/HorizontalBar.vue'
import MapChart from '@/components/MapChart.vue'
import RadarBar from '@/components/RadarBar.vue'
import RelationBar from '@/components/RelationBar.vue'
import RingBar from '@/components/RingBar.vue'
import TotalData from '@/components/TotalData.vue'
import Vertical from '@/components/Vertical.vue'
import WorldCloud from '@/components/WorldCloud.vue'
import { getVisualation } from '@/api/api.js'
import { onMounted, ref } from 'vue'
import { useFullscreen } from '@vueuse/core'
const { isFullscreen, enter, exit, toggle } = useFullscreen()
const data = ref(null)
const getData = async () => {
  const res = await getVisualation()
  data.value = res.data
}
getData()
</script>

<style scoped>
.my-title {
  background: linear-gradient(to right, hsl(98 100% 62%), hsl(204 100% 59%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}
</style>
